<template>
  <div class="group relative overflow-hidden rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 shadow-2xl hover:shadow-blue-500/20 hover:bg-white/8 transition-all duration-300 hover:-translate-y-2 hover:scale-[1.02]">
    <!-- 卡片顶部缩略图区域 -->
    <div class="h-40 relative overflow-hidden bg-slate-800/50">
      <!-- 加载状态 -->
      <div v-if="!imageLoaded && !imageError" class="absolute inset-0 flex items-center justify-center bg-slate-800/80">
        <div class="flex flex-col items-center gap-2 text-white/60">
          <n-spin size="small" />
          <span class="text-xs">加载预览...</span>
        </div>
      </div>

      <!-- 网站缩略图 -->
      <img
        v-if="!imageError"
        :src="thumbnailUrl"
        :alt="`${website.name} 网站预览`"
        :class="[
          'w-full h-full object-cover transition-all duration-500 group-hover:scale-110',
          imageLoaded ? 'opacity-100' : 'opacity-0'
        ]"
        @load="onImageLoad"
        @error="onImageError"
      />
      
      <!-- 缩略图加载失败时的备用背景 -->
      <div v-if="imageError" class="absolute inset-0 flex items-center justify-center" :style="{ background: website.banner }">
        <div class="absolute inset-0 bg-gradient-to-b from-white/10 to-black/30" />
        <div class="relative z-10 flex flex-col items-center gap-2 text-white/80">
          <n-icon size="30"><ImageIcon /></n-icon>
          <span class="text-sm font-medium">{{ website.name }}</span>
        </div>
      </div>
      
      <!-- 底部渐变遮罩 -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
      
      <!-- 网站图标和域名 -->
      <div class="absolute top-3 left-3 flex items-center gap-2">
        <div class="w-8 h-8 rounded-lg bg-white/20 backdrop-blur-sm p-1 border border-white/20 flex items-center justify-center">
          <n-icon size="16" color="rgba(255, 255, 255, 0.8)"><GlobeIcon /></n-icon>
        </div>
        <span class="text-xs text-white/70 bg-black/30 backdrop-blur-sm px-2 py-1 rounded-full">
          {{ getDomain(website.url) }}
        </span>
      </div>
      
      <!-- 悬停时的光效 -->
      <div class="absolute inset-0 bg-gradient-to-r from-blue-400/0 via-blue-400/20 to-purple-400/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
    </div>

    <!-- 卡片内容 -->
    <div class="p-5">
      <div class="flex items-start justify-between mb-3">
        <h3 class="text-lg font-bold text-white group-hover:text-blue-200 transition-colors duration-200 line-clamp-1">
          {{ website.name }}
        </h3>
        <n-icon size="16" class="text-white/60 group-hover:text-blue-300 transition-colors duration-200 flex-shrink-0 ml-2">
          <ExternalLinkIcon />
        </n-icon>
      </div>

      <p class="text-white/75 text-sm leading-relaxed mb-4 line-clamp-3">
        {{ website.description }}
      </p>

      <!-- 标签 -->
      <div class="flex flex-wrap gap-2 mb-4">
        <n-tag
          v-for="cat in website.category.slice(0, 2)"
          :key="cat"
          size="small"
          class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-500/20 text-blue-200 border border-blue-400/30"
        >
          <template #icon>
            <n-icon size="12"><TagIcon /></n-icon>
          </template>
          {{ getCategoryName(cat) }}
        </n-tag>
        <n-tag
          v-if="website.category.length > 2"
          size="small"
          class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/10 text-white/60 border border-white/20"
        >
          +{{ website.category.length - 2 }}
        </n-tag>
      </div>

      <!-- 访问按钮 -->
      <n-button
        type="primary"
        tag="a"
        :href="website.url"
        target="_blank"
        class="block w-full text-center py-2.5 px-4 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold shadow-lg hover:shadow-blue-500/25 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]"
      >
        访问工具
      </n-button>
    </div>

    <!-- 卡片边框光效 -->
    <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/0 via-blue-500/20 to-purple-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { NIcon, NSpin, NTag, NButton } from 'naive-ui'
import { ExternalLink as ExternalLinkIcon, Tag as TagIcon, Globe as GlobeIcon, Image as ImageIcon } from 'lucide-vue-next'
import type { Website } from '@/data/config'
import { categories } from '@/data/config'

const props = defineProps<{
  website: Website
}>()

const imageLoaded = ref(false)
const imageError = ref(false)

const getCategoryName = (categoryId: string) => {
  return categories.find(cat => cat.id === categoryId)?.name || categoryId
}

// 获取域名用于图标
const getDomain = (url: string) => {
  try {
    return new URL(url).hostname
  } catch {
    return ''
  }
}

// 生成缩略图URL
const thumbnailUrl = computed(() => {
  // 使用多个备选服务
  const services = [
    `https://api.screenshotmachine.com/?key=demo&url=${encodeURIComponent(props.website.url)}&dimension=1024x768&format=jpg&cacheLimit=0`,
    `https://image.thum.io/get/width/400/crop/600/${encodeURIComponent(props.website.url)}`,
    `/placeholder.svg?height=160&width=320&text=${encodeURIComponent(props.website.name)}`
  ]
  return services[0]
})

const onImageLoad = () => {
  imageLoaded.value = true
}

const onImageError = () => {
  imageError.value = true
  imageLoaded.value = false
}
</script>